<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Flex布局</title>
			<style type="text/css">
				*{
					margin: 0;
					padding: 0;
				}
				.bigbox{
					/* 把父盒子设置为flex容器 */
					display: flex;
					/* 改变主轴
					row:水平，从左往右，默认值
					row-reverse：从右往左
					column：垂直，从上往下
					column-reverse：垂直，从下往上
					*/
					/* flex-direction:row; */
					/* 换行
					弄wrap:不换行
					wrap：换行
					wrap-reverse:反转换行
					*/
					/* flex-wrap: wrap-reverse; */
					/* 复合写法： */
					flex-flow: row wrap;
					/* 决定项目在主轴的排列方式：
					flex-start:沿主轴的开始位置对齐，默认值
					flex-end:沿主轴的结束位置对齐
					center:居中
					space-betwee:两端对齐
					space-around:环绕对齐（拉手对齐）
					*/
					justify-content: space-between;
					/* 决定项目在交叉轴上的对齐方式
					flex-start：在交叉轴的开始位置
					flex-end:在交叉轴的结束位置
					center：居中
					*/
					align-items: center;
					/* 多条轴线的对齐方式
					flex-start:沿交叉值的开始位置对齐
					flex-end:沿交叉轴的结束位置对齐
					center：交叉轴上居中对齐
					space-around:在交叉轴上环绕对齐
					*/
					align-content:space-around;
					width: 700px;
					height: 700px;
					border: 1px solid black;
					margin: auto;
				}
				.bigbox div{
					width: 200px;
					height: 300px;
					border: 1px solid red;
					font-size: 34px;
					text-align: center;
					line-height: 300px;
				}
				</style>
			</head>
			<body>
				<div class="bigbox">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
				<div>6</div>
				</div>
	</body>
</html>
